/**
 * 月安装量-分部数据
 * wangmei
 */
import React, { Component } from 'react';
import { Tabs,  DatePicker, Form, Select, message  } from 'antd';
import { getLogInstallMonthChartWithIP } from '../../../Server/SystemManger';
import CommonDayPart from '../install/CommonDayPart';
import moment from 'moment';
import qs from 'qs';
import {REQUEST_SUCCESS,REQUEST_UNAUTHORIZED} from '../../../common/const';
require('../../systemManager/customer.css');

const { MonthPicker, RangePicker } = DatePicker;
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';
const monthFormat = 'YYYY-MM';
const Option = Select.Option;
const currentDate = new Date();

class DayPart extends Component{
    constructor(props) {
        super(props);
        const { sysCompany } = this.props;
        this.state = {
            data: [], //分部数据表格数据
            loading: false, // 分部数据加载状态
            xData: [], //分部数据x轴数据
            yData: [], //分部数据y轴数据
            partNameData: [], //分部名数据
            startIp: sysCompany.startIp, //分部管理起始ip
            endIp: sysCompany.endIp, //分部管理结束ip
            titleDate1: currentDate,  //标题日期显示
            titleDate2: currentDate,  //标题日期显示
            checkState: false, //多月排重状态
            checkData: [] //多月排重数据
        };
    }

    //查询分部方法
    getMonthChart = (values, startValue, endValue) =>{
        this.setState({ loading: true });
        let satrtDate = moment(values.startMonth).format(monthFormat);
        let endDate = moment(values.endMonth).format(monthFormat);
        const param = {
            startMonth: satrtDate,
            endMonth: endDate,
            startIp: startValue,
            endIp: endValue,
            sn: values.monthSn,
            version: values.monthVersion,
            distNum: values.monthDistNum
        };
        const _param = qs.stringify(param);
        getLogInstallMonthChartWithIP(_param).then(res => {
            if(res && res.code == REQUEST_SUCCESS){
                let data = res.data.points;
                let checkValue = res.data.total;
                let xData = [];
                let yData = [];
                for(let i = 0; i < data.length; i++){
                    xData.push(data[i].x.substr(data[i].x.length - 2, 2) + '月');
                    yData.push(data[i].y);
                }
                checkValue.x = satrtDate+'~'+endDate
                let array = [];
                array.push(checkValue)
                this.setState({
                    data: data,
                    xData: xData,
                    yData: yData,
                    loading: false,
                    titleDate1: satrtDate,
                    titleDate2: endDate,
                    checkData: array
                })
            }else {
                this.setState({
                    loading: false
                })
                res && res.code !== REQUEST_UNAUTHORIZED && message.error(res.msg);
            }
        });
    }

    checkChange = (e) =>{
        this.setState({
            checkState: e.target.checked
        })
    }

    render(){           
        const { sysCompany, state } = this.props;
        const { data, loading, xData, yData, titleDate1, titleDate2, checkState, checkData } = this.state;
        let _data = [];
        for(var i=0;i<data.length;i++){
            let temp = {
                "月份": data[i].x,
                "月安装量": data[i].y,
            }
            _data.push(temp);
        }

        const columns = [
            {
                title: "月份",
                dataIndex: "x",
                align: 'center',
                width: '50%',
                render: (text, record) => {
                    return moment(text+'01').format('YYYY-MM');
                }
            }, {
                title: "月安装量",
                dataIndex: "y",
                align: 'center',
                width: '50%',
            }
        ];

        const columns1 = [
            {
                title: "月份",
                dataIndex: "x",
                align: 'center',
                width: '50%',
            }, {
                title: "月安装量",
                dataIndex: "y",
                align: 'center',
                width: '50%',
            }
        ];

        return(
            <CommonDayPart
                flag={'month'}
                sysCompany={sysCompany}
                state={state}
                columns={columns}
                columns1={columns1}
                data={data}
                loading={loading}
                xData={xData}
                yData={yData}
                xName="月份" 
                yName="月安装量"  
                title={"月安装量信息（"+moment(titleDate1).format('YYYY年MM月')+" ~ "+moment(titleDate2).format('YYYY年MM月')+"）"}
                legendData={['月安装量信息']}
                formatter={moment(titleDate1).format('YYYY年')+'{b}<br />{a} : {c}'}
                _headers={['月份', '月安装量' ]}
                _data={_data}
                fileName={'月安装量信息'}
                getChartData={this.getMonthChart}
                checkChange={this.checkChange}
                checkState={checkState}
                checkData={checkData}
            />
        )
    }
}

export default Form.create()(DayPart)